<template>
    <section class="content-header">
        <h1>景区列表{{a}}</h1>
    </section>
    <section class="content">
        <div class="box box-primary">
            <div class="box-header">
                <i class="ion ion-clipboard"></i>
                <h3 class="box-title">景区列表</h3>
                <div class="box-tools pull-right">
                    <a class="btn btn-block btn-primary" v-link="{ path: '/regionsCreat' }"><i class="fa fa-plus small-pr"></i>创建景区</a>
                </div>
            </div>
            <div class="box-body">
                <ul id="sortable-list" class="todo-list">
                    <li v-for="region in regions">
                        <a class="display-block" href="#/regionsDetail/{{region.region_id}}">
                        <span class="handle">
                          <i class="fa fa-ellipsis-v"></i>
                          <i class="fa fa-ellipsis-v"></i>
                        </span>
                            <img class="regions-img" src="{{region.thumbnail}}?imageView2/2/w/30/h/30" width="30" height="30" />
                            <span class="text"><strong>{{region.name}} </strong>{{region.company}} {{region.code}}</span>
                        </a>
                        <div class="tools">
                            <i class="fa" :class="[region.is_hot ? 'fa-star' : 'fa-star-o']" @click="regionHot(region)"></i>
                            <i class="fa" :class="[region.is_hidden ? 'fa-eye-slash' : 'fa-eye']" @click="regionHidden(region)"></i>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

<script>
var data = {regions : null, a:1};//存放regions数据
Vue.component('regionsList', {
    //template: '#regionsList',
    data: data,
    methods: {
        //收藏按钮事件
        regionHot: function(region){
            vHttp(INTERFACE_API.REGIONDETAIL.replace(":region_id", region.region_id), 'PUT', {"is_hot" : !region.is_hot}, function(response){
                region.is_hot = !region.is_hot;
            });
        },
        //隐藏按钮事件
        regionHidden: function(region){
            vHttp(INTERFACE_API.REGIONDETAIL.replace(":region_id", region.region_id), 'PUT', {"is_hidden" : !region.is_hidden}, function(response){
                region.is_hidden = !region.is_hidden;
            });
        }
    },
    route: {
        data: function(transition){
            //获取景区列表
            vHttp(INTERFACE_API.REGIONS, 'GET', null, function(response){
                data.regions = response;
                transition.next(data);

                //景区排序
                var el = document.getElementById('sortable-list');
                var sortable = new Sortable(el, {
                    onSort: function (evt) {
                        var update_pos;
                        if(evt.newIndex == 0){
                            update_pos = data.regions[evt.newIndex].pos - 65535;
                        }else if(evt.newIndex == response.length - 1){
                            update_pos = data.regions[evt.newIndex].pos + 65535;
                        }else{
                            update_pos = (data.regions[evt.newIndex - 1].pos + data.regions[evt.newIndex].pos) / 2;
                        }
                        vHttp(INTERFACE_API.REGIONDETAIL.replace(":region_id", data.regions[evt.oldIndex].region_id), 'PUT', {"pos" : update_pos}, function(response){
                            //再次获得数据
                            vHttp(INTERFACE_API.REGIONS, 'GET', null, function(response){
                                data.regions = response;
                            });
                        });
                    }
                });
            });
        }
    }
});
</script>